<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import { useGetCascade, useCommunitySave } from '@fl/api/add-elevator-api'
import type { cascadeParam } from '@fl/api/add-elevator-api/model/apply-model'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const visible = defineModel<boolean>('visible', { required: true, default: false })
const id = defineModel<string>('id', { required: true, default: '' })
const info = defineModel<any>('info', { required: true, default: {} })

const formRef = ref()
const title = ref('新增区属街道社区字典')

const initialState = {
    areaCode: '',
    areaName: '',
    streetCode: '',
    streetName: '',
}
const state = ref<any>(cloneDeep(initialState))

// 级联选择
const initialParams = {
    targetLabel: '',
    areaCode: '',
    streetCode: '',
}
const areaParams = ref<cascadeParam>(cloneDeep(initialParams))
const streetParams = ref<cascadeParam>(cloneDeep(initialParams))
areaParams.value.targetLabel = 'area'
const { data: areaList } = useGetCascade(areaParams)
const { data: streetList } = useGetCascade(streetParams)

const areaOptions = ref<any>([])
const streetOptions = ref<any>([])

watchEffect(() => {
    if (areaList.value) {
        areaOptions.value = cloneDeep(areaList.value)
    }
    if (streetList.value) {
        streetOptions.value = cloneDeep(streetList.value)
    }
})

watchEffect(() => {
    if (visible.value) {
        title.value = '编辑区属街道社区字典'
        state.value = cloneDeep(info.value)
        // 查街道
        streetParams.value.targetLabel = 'street'
        streetParams.value.areaCode = cloneDeep(info.value).areaCode
    }
})

// 提交表单
const { isPending, mutate } = useCommunitySave()

// 提交
async function submit() {
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            id: id.value ?? '',
            ...unref(state),
        }
        // console.log('params', params)
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                cancel()
            },
        })
    }
}

// 1.选择区
function areaChange() {
    //清空
    state.value.streetCode = ''
    state.value.communityCode = ''
    clearStreet()

    const target = areaOptions.value.find((v: any) => v.value === state.value.areaCode)
    state.value.areaName = target.label
    streetParams.value.targetLabel = 'street'
    streetParams.value.areaCode = state.value.areaCode
}
function clearStreet() {
    state.value.streetCode = ''
    state.value.streetName = ''
    community()
}
// 2.街道选择
function streetChange() {
    const target = streetOptions.value.find((v: any) => v.value === state.value.streetCode)
    state.value.streetName = target.label
    community()
}
function community() {
    state.value.communityCode = ''
}

function cancel() {
    visible.value = false
}

function reset() {
    id.value = ''
    formRef.value.formInstance.resetFields()
}

const columns: PlusColumn[] = [
    {
        label: '社区',
        prop: 'communityName',
    },
    {
        label: '所在区',
        prop: 'areaCode',
    },
    {
        label: '街道',
        prop: 'streetCode',
    },
]

const rules = {
    communityName: [
        {
            message: '请输入社区名称',
            required: true,
        },
    ],
    areaCode: [
        {
            message: '请选择所在区',
            required: true,
        },
    ],
    streetCode: [
        {
            message: '请选择街道',
            required: true,
        },
    ],
}
</script>

<template>
    <PlusDialog v-model="visible" :title="title" close-on-press-escape :has-footer="false" @cancel="cancel"
        @closed="reset">
        <div class="mt-20 plusform">
            <PlusForm ref="formRef" v-model="state" :columns="columns" :label-width="120" :rules="rules"
                :has-footer="false" :row-props="{ gutter: 20 }">

                <template #plus-field-areaCode>
                    <el-select v-model="state.areaCode" placeholder="请选择" filterable @change="areaChange">
                        <el-option v-for="item in areaOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>

                <template #plus-field-streetCode>
                    <el-select v-model="state.streetCode" placeholder="请选择" filterable @change="streetChange">
                        <el-option v-for="item in streetOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>

            </plusform>
        </div>

        <div class="mx-auto mt20 flex justify-center">
            <el-button @click="cancel">
                取消
            </el-button>

            <SubmitBtn type="primary" :loading="isPending" @click="submit">
            保存
            </SubmitBtn>
        </div>
    </PlusDialog>
</template>

<style lang="scss" scoped>
</style>
